<template>
<div>
  <va-card :title="'查看楼层列表'" class="mb-4">

    <va-data-table
      :fields="fields"
      :data="checkinRecords"
      :per-page="10"
    >
      <template slot="marker" slot-scope="props">
        <va-icon name="fa fa-circle" :color="props.rowData.color" size="8px" />
      </template>

      <template slot="actions" slot-scope="props">
         <va-button flat small color="info" @click="info(props.rowData)" class="ma-0">
          详情
        </va-button>
        <va-button flat small color="gray" @click="edit(props.rowData)" class="ma-0">
          编辑
        </va-button>
        <va-button flat small color="danger" @click="remove(props.rowData)" class="ma-0">
          删除
        </va-button>
      </template>
    </va-data-table>
  </va-card>
      <va-modal
      v-model="showInfo"
      :title=" '详细信息' "
      :okText=" '确定' "
      :cancelText=" '返回' "
      :message=" infotext "
      :hideDefaultActions="true"
    />
    <va-modal
      v-model="showdeleconfirm"
      :title=" '确认删除' "
      :okText=" '删除' "
      :cancelText=" '取消' "
      :message=" '确认删除？' "
      @ok="dele"
    />

</div>

</template>

<script>

export default {
  data () {
    return {
      showInfo:false,
      showdeleconfirm:false,
      infotext:'',
      page:1,
      checkinRecords: [],
      deleteselect: ''
    }
  },
  created(){
this.getdata()
},
  computed: {
    fields () {
      return [{
        name: '__slot:marker',
        width: '30px',
        dataClass: 'text-center',
      }, {
        name: 'number',
        title: '楼层号',
      },
      {
        name: 'name',
        title: '楼层名称',
      },
       {
        name: 'status',
        title: '楼层状态',
      }, {
        name: 'content',
        title: '楼层介绍',
      }, {
        name: '__slot:actions',
        dataClass: 'text-right',
      }]
    },
  },

  methods: {
    getdata() {
      var _this=this
     var fd = new URLSearchParams()
      fd.append('currentPage',_this.page)
    _this.$http.post('http://8.135.35.123:9000/hotelsystem/floor/list',fd)
      .then(function(response) {
          if(response.data.code==80200) {
            _this.checkinRecords=_this.checkinRecords.concat(response.data.data.records)
            if(response.data.data.pages>_this.page) {
              _this.page++
              _this.getdata()
            }
            else{
 for (var item of _this.checkinRecords)
                  item.status=item.status==0?'未开':item.status==1?'正常':'未知'
            }
          }
        },
        function(err){
          console.log(err)
        }
      )
    },
    info (floorData) {
      this.infotext='楼层id : '+floorData.id+'<br/>楼层号 : '+floorData.number+'<br/>楼层名称 : '+floorData.name+'<br/>创建时间 : '+floorData.createTime+'<br/>楼层介绍 : '+floorData.content+'<br/>状态 : '+floorData.status+'<br/>楼层图片 : <br/><img src="'+(floorData.image==null?'':floorData.image)+'" width="200">'
      this.showInfo=true
    },
    edit (floorData) {
      this.$router.push({ name: 'floor-mod', params: floorData})
    },
    remove (floorData) {
      this.showdeleconfirm=true
      this.deleteselect=floorData.id
    },
    dele(){
      var _this=this
      var fd = new URLSearchParams()
      fd.append('id',_this.deleteselect)
    this.$http.post('http://8.135.35.123:9000/hotelsystem/floor/remove',fd)
      .then(function(response) {
          if(response.data.code==80200) {
            _this.showmsg('删除成功')
    _this.checkinRecords.forEach((item, index) => {
      if(item.id==_this.deleteselect){
         _this.checkinRecords.splice(index, 1);
      }
    });
          }
          else
            _this.showmsg('删除失败')
        },
        function(err){
          console.log(err)
        }
      )
    },
    showmsg(msg) {
    this.showToast(
        msg,{
          position: 'top-center',
          duration: 2500,
          fullWidth: false,
        },
      )

    }
  },
}
</script>
<style lang="scss">
</style>
